import React from "react";
import { useCheckboxGroupState } from "@react-stately/checkbox";
import { useCheckboxGroup } from "@react-native-aria/checkbox";
import { Button, Text, View } from "react-native";

export let CheckboxGroupContext = React.createContext<any>(null);

export function CheckboxGroup(props: any) {
  let { children, label } = props;
  let state = useCheckboxGroupState(props);
  let { groupProps, labelProps } = useCheckboxGroup(props, state);
  return (
    <View {...groupProps}>
      {label && <Text {...labelProps}>{label}</Text>}
      <Text >...state value: {state.value} ,isDisabled: {state.isDisabled?"true":"false"} ,isReadOnly:{state.isReadOnly?"true":"false"} ,isInvalid:{state.isInvalid?"true":"false"} </Text>
      <CheckboxGroupContext.Provider value={state}>
        {children}
      </CheckboxGroupContext.Provider>
      <View style={{ flexDirection: 'row', flex: 1, justifyContent: 'space-between' }}>
        <Button title="toggleValue " onPress={() => { state.toggleValue("baseball") }} />
        <Button title="addValue " onPress={() => { state.addValue("baseball") }} />
        <Button title="removeValue " onPress={() => { state.removeValue("baseball") }} />
      </View>
    </View>
  );
}
